<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="card">
        <div class="title flex flex-between">
            <div class="word">2020年社会消费品零售总额</div>
            <div class="more">
                <span class="point"></span>
                <span class="point"></span>
                <span class="point"></span>
            </div>
        </div>
        <div class="content mt">
            <div class="text-warning f-w-600">
                <div class="one text-center">全市社会消费品零售总额</div>
                <div class="two flex flex-between mt">
                    <div>累计完成2，003.1亿元</div>
                    <div>同比下降6.5%</div>
                </div>
            </div>
            <div class="three text-white bg-warning mt br">
                <div class="text-center">
                    限额以上单位零售额
                </div>
                <div class="flex flex-between mt">
                    <div>791.2亿元</div>
                    <div>同比下降6.6%</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    window.οnlοad = function () {
        console.log('99999')
        changeDivHeight();
    }
    //当浏览器窗口大小改变时，设置显示内容的高度
    window.οnresize = function () {
        changeDivHeight();
    }
    function changeDivHeight() {
        var h = document.documentElement.clientHeight;//获取页面可见高度
        document.getElementById("div_ov_y").style.height = h - 140 + "px";
    }
</script>

<style>
    .card {
        background: #fff;
        box-shadow: 0px 0px 5px 3px #eeeeee;
        border-radius: 4px;
        padding: 8px;
    }

    .card .title {
        border-left: #007aff 4px solid;
        padding-left: 4px;
    }

    .card .title .more {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card .title .more .point {
        display: inline-block;
        background: #bbb;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        margin-right: 4px;
    }

    .card .content {
        border: #f0ad4e 2px solid;
        padding: 8px;
    }

    .card .content .three {
        padding: 8px;
    }

    .card .text-white {
        color: #fff;
    }

    .card .text-warning {
        color: #f0ad4e;
    }

    .card .text-primary {
        color: #007aff;
    }

    .card .bg-warning {
        background: #f0ad4e;
    }

    .card .bg-primary {
        background: #007aff;
    }

    .card .mt {
        margin-top: 10px;
    }

    .card .br {
        border-radius: 6px;
    }

    .card .text-center {
        text-align: center;
    }

    .card .f-w-600 {
        font-weight: 800;
    }

    .flex {
        display: flex;
    }

    .flex-column {
        flex-direction: column;
    }

    .align-center {
        align-items: center;
    }

    .justify-center {
        justify-content: center;
    }

    .flex-center {
        justify-content: center;
        align-items: center;
    }

    .flex-between {
        justify-content: space-between;
    }

    .flex-around {
        justify-content: space-around;
    }

    .flex-start {
        justify-content: flex-start;
    }

    .flex-end {
        justify-content: flex-end;
    }

    .flex-worp {
        flex-wrap: wrap;
    }
</style>

</html>